<template>
         <div  class="margin_auto">
            <div  class='top_bar'>
      <!-- <div   class="display-justify-s-b">
        <van-icon @click="backEvent" size="23" name="arrow-left" />
         <div style="margin-left:5px;font-size:0.5rem">{{$route.name}}</div>
      </div> -->
      <div v-show="dir=='/bookshelf/my'||dir=='/bookshelf/history'" class="sez_select">
      
        <div @click="$router.replace(item.path )" :to="item.path" :class="item.name==$route.name&&'backColor'" v-for="(item,i) in bookshelfArr" :key="i">{{item.name}}</div>
      </div>
      <!-- <div class="Top_icon">
        <van-icon name="search"  size="23" />
        <van-icon :class-prefix="'iconfont icon-mulu'"  size="23"/>
      </div> -->
            </div>
            
    </div>
</template>

<script>
    export default {
        data(){
          return {
            bookshelfArr:[
               {name: 'my books',path:'/bookshelf/my'},
               {name:'footprint',path:'/bookshelf/history'}
            ],
          }
        },
        computed:{
          dir(){
            return this.$route.path
          },
          bookshelf(){
            return this.$store.state.Home.bookshelf
          }
        },
        methods: {
            backEvent(){
                this.$router.back()
                this.showIcon = false
            }
           
        },
   
    }
</script>

<style lang="scss" scoped>

.backColor{
  background-color: #be66ff;
  color: #ffffff;
}
.btn_book{
        width: 12rem;
        padding: 10px 30px;
    }
.top_bar{
    width: 12rem;
    padding:0.43rem;
    display: flex;
    // background-color: #ffffff;
    align-items: center;
    box-sizing: border-box;
    font-size: 0.45rem;
    position: relative;
    justify-content: center;
    .sez_select{
      height: 100%;
      border: 1px solid #be66ff;
      border-radius: 4px;
      display: flex;
      color: #be66ff;
      div{
        padding: 4px 12px;
      }

    }
    .Top_icon{
      .van-icon {
        &:nth-child(1){
          margin-right: 20px;
        }
      }
    }
  }

</style>